<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .chess-tab{
            list-style: none;
            background-image:url("images/null.jpg") ;
            user-select: none;
            display: grid;
            grid-template-columns: repeat(15,50px);
            grid-template-rows: repeat(15,50px);
        }
        .chess-tab li{
            line-height: 50px;
            text-align: center;
        }
        .chess-tab li[class=""]:hover{
            background-image: url("images/hover.jpg");
        }
        .black{
            background-image:url("images/black.jpg");
        }
        .white{
            background-image: url("images/white.jpg");
        }
        .hui{
            background-color: khaki;
            width: 50px;
            height:25px ;
            border-radius: 10px;
            text-align: center;
            color: rgb(8, 169, 223);
            float: left;

        }
        .table{
            margin-left: 20px;
            margin-right: 20px;
            float: left;
        }
        
    </style>
</head>

<body>
<div>

    <div id="div" class="table">
        <ul class="chess-tab">
            <li v-for="(flag,index) in flags" @click="changes(index)" :class="chessColor(flags[index])"  ></li>
        </ul>
        <div @click="hui" class="hui" >悔棋</div>
        <div @click="clear" class="hui">清空</div>
    </div>

</div>
    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#div",
            data: {
                history:[],
                flags:[],
                blackOrWhite:false,
                count:[],
                isGameStart:true
            },
            // 用于设置生成的格子数量 为15*15
            created(){
                for (let i=0;i<225;i++){
                    this.flags[i] = "0"
                }
            },
            methods: {
                // 用于chess的样式变化
                chessColor(index) {
                    if(index=="1"){
                        return "white"
                    }
                    else if(index=="2"){
                        return "black"
                    }
                    else{
                        return ""
                    }
                },
                changes(index) {
                    if(this.flags[index] == "0" && this.isGameStart)
                    {
                        if(this.blackOrWhite){
                            color = "2"
                        }else{
                            color = "1"
                        }
                        Vue.set(this.flags,index,color)

                        col = index % 15
                        row = Math.floor(index / 15)
                        console.log("你下的是"+index)

                        this.history.push(index)

                        if(this.isWin(index)){
                            player = color=="2"?"黑方":"白方"
                            alert(player+"胜利!")
                            this.isGameStart = false
                        }

                        this.blackOrWhite = !this.blackOrWhite
                    }
               
                },
                isWin(index){
                    let col = index % 15
                    let row = Math.floor(index / 15)

                    let color = this.flags[index]

                    let hen = []
                    let shu = []
                    let x_a = []
                    let x_b = []

                    //横向
                    for(let i=-4;i<=4;i++){
                        c = col + i
                        if(c >= 0 && c <= 14){
                            r = row
                            ii = c  + r * 15
                            hen.push(this.flags[ii])
                        }
                    }
                    
                    //纵向
                    for(let i=-4;i<=4;i++){
                        r = row + i
                        if(r >= 0 && r <= 14){
                            c = col
                            ii = c  + r * 15
                            shu.push(this.flags[ii])
                        }
                    }

                    // / 向 
                    for(let i=-4;i<=4;i++){
                        r = row + i
                        c = col + i
                        if((r >= 0 && r <= 14) && (c >= 0 && c <= 14)){
                            ii = c  + r * 15
                            x_a.push(this.flags[ii])
                        }
                    }
   
                    // \ 向 
                    for(let i=-4;i<=4;i++){
                        r = row + i
                        c = col - i
                        if((r >= 0 && r <= 14) && (c >= 0 && c <= 14)){
                            ii = c  + r * 15
                            x_b.push(this.flags[ii])
                        }
                    }

                    function isHasFiveContinuousChess(arr,color){
                        console.log(arr);
                        //console.log("arr.length:",arr.length);
                        if(arr.length >= 5){
                            let num = 0
                            for(let i = 0;i<arr.length;i++){
                                if(num != 5){
                                    if(arr[i] == color){
                                        num += 1
                                    }else{
                                        num = 0
                                    }
                                }else{
                                    return true
                                }
                            }
                            return num>=5
                        }else{
                            return false
                        }
                    }

                    console.log(isHasFiveContinuousChess(hen,color) || isHasFiveContinuousChess(shu,color) || isHasFiveContinuousChess(x_a,color) || isHasFiveContinuousChess(x_b,color));
                    return isHasFiveContinuousChess(hen,color) || isHasFiveContinuousChess(shu,color) || isHasFiveContinuousChess(x_a,color) || isHasFiveContinuousChess(x_b,color)
                },
                test_win1(index){
                    
                    var xxx;
                    for(let i = 0 ;i < 5; i++){
                        
                        if((this.flags[index + i*15] == this.flags[index])||(this.flags[index - i*15] == this.flags[index])){
                            this.count[1] = this.count[1] + 1;
                            //console.log(this.count[1])
                            
                        }
                        
                        if((this.flags[index + i*14] == this.flags[index])||(this.flags[index - i*14] == this.flags[index])){
                            this.count[2] = this.count[2] + 1;
                            //console.log(this.count[2])
                            
                        }
                        
                        if((this.flags[index + i] == this.flags[index])||(this.flags[index - i] == this.flags[index])){
                            this.count[3] = this.count[3] + 1;
                            //console.log(this.count[3])
                            
                        }
                        
                        if((this.flags[index + i*16] == this.flags[index])||(this.flags[index - i*16] == this.flags[index])){
                            this.count[4] = this.count[4] + 1;
                            //console.log(this.count[4])
                            
                        }

                    }
                   for (let i = 1 ; i <=4 ;i++){
                       if(this.count[i]>=5 ){
                           xxx= true
                       }else{
                           this.count[i] = 0
                       }
                   }
                      
                    if (xxx == true){
                        if (this.flags[index] == 1){
                            window.alert("白旗胜利")
                        }else{
                            window.alert("黑旗胜利")
                        }

                        
                    }

                },
                hui(){
                    Vue.set(this.flags,this.history.pop(),"0")
                    this.blackOrWhite = !this.blackOrWhite
                 },
                clear(){
                    for (let i=0;i<225;i++){
                        this.flags[i] = "0"
                    }
                    this.history = []
                    Vue.set(this.history)
                    Vue.set(this.flags,0,"0")
                    this.isGameStart = true
                }
                 }
               

        })
    </script>
</body>

</html>